<script setup>
import { getProductionGdrkxq } from '@/api/visual/productionBoard'
import { fontSize } from '@/utils/globalMethod.js'

const optionData = ref([])
const key = ref(1)

const option = computed(() => ({
  title: {
    text: '未结案工单入库详情',
    textStyle: {
      color: '#fff',
      fontSize: fontSize(0.16)
    }
  },

  series: [
    {
      name: '未结案工单入库详情',
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['40%', '60%'],
      label: {
        color: '#fff',
        formatter: '{b}: {d}%',
        textStyle: {
          fontSize: fontSize(0.12)
        }
      },
      labelLine: {
        length: 8
      },
      data: [
        { value: optionData.value.wwg, name: '未完成' },
        { value: optionData.value.ywg, name: '已完成' }
      ]
    }
  ]
}))
const loadData = async () => {
  const { data } = await getProductionGdrkxq()
  optionData.value = data
}

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++
    }, 100)
  })
}

onMounted(loadData)

onMounted(() => {
  window.addEventListener('resize', keyResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', keyResize)
})
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box13 class="ps_pd10" :key="key">
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box13>
  </div>
</template>

<style scoped lang="scss"></style>
